﻿@import url('Common.less');


@headHeight: 16%;


.header-wrap, header {
    height: @headHeight;
    min-height: 110px;
    z-index: 1000;
}

.header-wrap {
    max-height: 220px;
}

.wrapper {
    .boxSizing(border-box);
    .HorizontalCenter(100%);
    .minMaxW(310px,1203px);
    padding: 0 42px;
}

header {
    background-color: white;
    position: fixed;
    .width(100%);
    .UserSelect(none);
    .transition(background-color,0.2s);
    .transition(box-shadow,0.2s);
}

    header .wrapper {
        .height(100%);
    }

    header .logoLink {
        display: inline-block;
        .height(100%);
        font-size: 0;
        padding: 0;
        position: relative;
        text-decoration: none;
        vertical-align: top;
        .transition(opacity, 0.2s);
    }

    header .logoIcon {
        background-image: url(img/logo64.png);
        /*background-image: url(…chJPX6%2FD4UqpnJ5%2FV5%2Bm%2FVJGh4ff4%2FAQYAXMBX7PlvtFYAAAAASUVORK5CYII%3D);
        background-image: -webkit-image-set(url(…chJPX6%2FD4UqpnJ5%2FV5%2Bm%2FVJGh4ff4%2FAQYAXMBX7PlvtFYAAAAASUVORK5CYII%3D) 1x, url(…FTrtuhM4BFecAawBrAGsAawMIawMIawKIM8W8BBgCClq2Kussz0QAAAABJRU5ErkJggg%3D%3D) 2x);*/
        .background(100%,center);
        .inBlcok();
        .height(100%);
        vertical-align: top;
        width: 64px;
        max-width: 64px;
    }

    header #workmark-container, header .wordmark {
        .inBlcok();
        .height(100%);
    }

    header .wordmark {
        background-image: url("img/wordmark64.png");
        /*background-image: url(…KJSACiWgQqEEVCgBFQoloEIJqFAoARX%2FHfwrwAAlEyP9nfm0XwAAAABJRU5ErkJggg%3D%3D);
        background-image: -webkit-image-set(url(…KJSACiWgQqEEVCgBFQoloEIJqFAoARX%2FHfwrwAAlEyP9nfm0XwAAAABJRU5ErkJggg%3D%3D) 1x, url(…IogIQQQgEkhBAKICGEUAAJIYQCSAghFEBCCEmV%2FwkwAMCgzSeY%2BSPfAAAAAElFTkSuQmCC) 2x);*/
        .background(100%,center);
        position: relative;
        vertical-align: top;
        .width(160px);
        .transition(opacity, 0.3s);
    }

    header #top {
        background-color: #2fdab8;
        border-radius: 24px;
        display: block;
        height: 40px;
        margin: 15px 0;
        position: absolute;
        top: 0;
        width: 0;
        visibility: hidden;
        -webkit-transition: 0.2s background;
        -ms-transition: 0.2s background;
        -moz-transition: 0.2s background;
        -o-transition: 0.2s background;
        transition: 0.2s background;
    }

        header #top:after {
            background-image: url("img/top_arrow48.png");
            /*background-image: url(…O41fZAAAAIDsGxH%2F0AAAAAAAAAAAAAAAkKy%2BAgwA3akyg5lYQo8AAAAASUVORK5CYII%3D);
            background-image: -webkit-image-set(url(…O41fZAAAAIDsGxH%2F0AAAAAAAAAAAAAAAkKy%2BAgwA3akyg5lYQo8AAAAASUVORK5CYII%3D) 1x, url(…AAAEAAAIAAAAABAAACAAAEAAAIAAAQAAAgR8%2B3AAMA4OlRrLUkx7AAAAAASUVORK5CYII%3D) 2x);*/
            content: "";
            height: 40px;
            width: 40px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            left: 0;
        }

.header-container.sticky header {
    background-color: rgba(255,255,255,0.92);
    .box-shadow(0,0,20px,0,rgba(0,0,0,0.2));
    top: 0;
    .width(100%);
    z-index: 999;
    height: 70px !important;
    min-height: 70px !important;
}

.header-container.sticky #lockup {
    display: none;
}

.sticky header #top {
    cursor: pointer;
    display: inline-block;
    opacity: 1;
    visibility: visible;
    width: 40px;
}

header #top:hover {
    background-color: #39ac95;
}
